import { Component, OnInit } from '@angular/core';
// 引入自己创建的Hero类
import { Hero } from '../hero';
// 引入那 10 个英雄
// import { HEROES } from '../mock-heroes';  //后面不会用到它了
// 导入服务
import { HeroService } from '../hero.service';

@Component({
  selector: 'app-heroes', // CSS 元素选择器  用来在父组件的模板中匹配 HTML 元素的名称，以识别出该组件
  templateUrl: './heroes.component.html', // 组件模板文件的位置。
  styleUrls: ['./heroes.component.css'] // 组件私有 CSS 样式表文件的位置。
})
export class HeroesComponent implements OnInit {

  // // 创建了个 hero 类名是 Hero 值是。。。
  // hero: Hero = {
  //   id: 1,
  //   name: 'Windstorm'
  // };

  // // 创建heroes 等于10个英雄
  // // heroes= HEROES;
  // heroes: Hero[]=[];
  heroes: Hero[];

  // 声明服务
  constructor(private heroService: HeroService) { }

  ngOnInit() {
    // 调用一下这个方法
    // 刚才一直报错，this.heroService.getHeroes(); 不是一个function,但是我怎么也找不到这个错误
    // 结果关闭服务后，重启，解决问题。en...
    this.getHeroes();
  }

  // selectedHero: Hero;
  // onSelect(hero: Hero): void {
  //   this.selectedHero = hero;
  // }

  // 初始化列表的时候，就调用了 getHeroes 方法，
  // 这个方法又调用服务里面的 getHeroes() 方法
  // 服务里面又调用 messageService 里面的 add() 方法，添加了一个信息给 message

  getHeroes(): void {
    // 1、这种方式是同步的
    // this.heroes = this.heroService.getHeroes();

    // 2、这种方式是异步的，当 HeroService 从远端服务器获取英雄数据时，就可以工作了。
    // 这里类名上加了 Observable            heroes2是返回值
    this.heroService.getHeroes().subscribe(heroes2=>this.heroes =heroes2)
  }

  add(name: string): void {
    name = name.trim(); // trim 即把一个字符串头尾的空格去掉,一般都是为了防止复制错误或者因为空格导致的错误
    if (!name) { return; }
    this.heroService.addHero({ name } as Hero) // as 会将这个数据转换成Hero类似的对象（缺少hero的id属性）
      .subscribe(hero => {
        this.heroes.push(hero);
      });
  }

  //虽然这个组件把删除英雄的逻辑委托给了 HeroService，但仍保留了更新它自己的英雄列表的职责。
  delete(hero: Hero): void {
    this.heroes = this.heroes.filter(h => h !== hero);
    this.heroService.deleteHero(hero).subscribe();
  }
}
